<template>
    <div style="min-width:809px">
       <div v-if="$route.path == '/technician'">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="paging" class="flex1" label-width="90px">
                <el-form-item label="门店">
                    <!-- <el-input style="width:230px" v-model="form.username"></el-input> -->
                    <el-select v-model="paging.store_id" @change="getShiftType" style="width:230px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班次">
                    <!-- <el-input style="width:230px" v-model="form.username"></el-input> -->
                    <el-select v-model="paging.shift_id" @change="getList()" style="width:230px" placeholder="请选择">
                        <el-option
                            v-for="item in shiftTypeList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
         </div>
        <div class="vs-table-box" v-loading="loading">
            <div class="table">
                <draggable 
                v-model="tableData" 
                @start="onStart"
                @update="onEnd"
                filter=".undraggable"
                handle=".mover"
                :move="onMove"
                 >
                <template v-for="(item,i) in tableData" >
                    <div :key="item.id" v-if="i==0" class="tr thead undraggable">
                        <div class="td ttop">排序</div>
                        <div class="td">技师姓名</div>
                        <!-- <div class="td">已预约时间</div> -->
                    </div>
                    <div :key="item.id" v-else-if="i==tableData.length-1" class="tr undraggable">
                        <div class="td ttop"></div>
                        <div class="td addpai">
                            <span @click="addRow" class="tab-table-text">设置技师排钟顺序</span>
                        </div>
                    </div>
                    <div 
                    v-else
                    class="tr tbody mover" 
                    :key="item.id"
                    :prisid='item.id'
                    >
                        <div class="td ttop" style="cursor: move;">
                            <i  class="iconfont icon-tuozhuai"></i>
                            {{i}}
                        </div>
                        <el-popover
                        placement="top"
                        width="160"
                        v-model="item.visible">
                            <p><i style="color: #e6a23c;" class="el-alert__icon el-icon-warning"></i> 确定要删除该技师上钟排序吗？</p>
                            <!-- <el-alert title="确定要删除该技师上钟排序吗？" type="warning" show-icon> </el-alert> -->
                            <div style="text-align: right; margin: 0">
                                <el-button size="mini" type="text" @click="item.visible = false">取消</el-button>
                                <el-button type="primary" :loading="item.loading" size="mini" @click="deletSort(item)">确定</el-button>
                            </div>
                            <div slot="reference" style="cursor: pointer;" class="td">{{item.staff.name}}</div>
                        </el-popover>
                        <!-- <div class="td">{{item.date}}</div> -->
                    </div>
                </template>
                </draggable> 
            </div>
            <!-- <el-table :header-cell-style="{background:'#f5f6f8'}" v-loading="loading" :data="tableData"  style="width: 100%">
                <el-table-column width="60px" label="排序" type="index" ></el-table-column>
                <el-table-column label="技师姓名" prop="id" ></el-table-column>
            </el-table> -->
        </div>
        <el-dialog
        title="设置技师排钟顺序"
        :visible.sync="callout"
        width="500px"
        :before-close="handleClose">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <!-- <el-form-item label="门店" prop="store_id">
                    <el-select v-model="ruleForm.store_id" style="width:230px" placeholder="请选择">
                        <el-option
                            v-for="item in shopList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班次" prop="shift_id">
                    <el-select v-model="paging.shift_id" @change="getList()" style="width:230px" placeholder="请选择">
                        <el-option
                            v-for="item in shiftTypeList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item label="技师" prop="staff_id">
                    <el-select v-model="ruleForm.staff_id" placeholder="请选择">
                        <el-option
                            v-for="item in staffList"
                            :key="item.id"
                            :label="item.name"
                            :disabled="item.disabled"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="排序" prop="transfer_time">
                    <el-input v-model="ruleForm.sort" placeholder="请输入排序"></el-input>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取 消</el-button>
                <el-button :loading="isBtn" type="primary" @click="stafftransfer">确 定</el-button>
            </span>
        </el-dialog>
       </div>
       <router-view></router-view>
    </div>
</template>

<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
    components: {
        draggable,
    },
    data() {
        return {
            drag:false,
            callout:false,//调出
            ruleForm:{
                staff_id:'',//员工ID
                shift_id:'',//班次ID
                store_id:'',//门店id
                sort:'',//排序
                // date:'2021-10-18'
            },
            paging: {
                store_id:'',
                shift_id:'',
                page: 1,
                total: 0,
                limit: 10,
            },
            rules:{
                store_id:{ required: true, message: '请选择门店', trigger: 'change' },
                shift_id:{ required: true, message: '请选择班次', trigger: 'change' },
                staff_id:{ required: true, message: '请选择技师', trigger: 'change' },
            },
            loading:false,
            shopList:[],
            isBtn:false,
            staffList:[],
            shiftTypeList:[],
            tableData: [],
            otherData:[],
            wornList:[],
        };
    },
    beforeUpdate(){
    },
    async created() {
        this.loading = true;
        await this.homegetStore();
        // await this.getShiftType();
        // let arr = [];
        // for (let index = 0; index <130; index++) {
        //     arr.push({
        //         id:index++,
        //         name:index
        //     })
        // }
        // this.tableData = arr;
       
        // this.staffshift();
    },
    mounted(){
        // this.$dragging.$on('dragged', async (res) => {
        //     console.log(res);
            
        // })
        // this.$dragging.$on('dragend', (item) => {
        //     console.log(item,"@");
        // })
    },
    methods: {
        onMove(e){ 
            if(e.relatedContext.element.id=='Q'||e.relatedContext.element.id=='W') return false;
            return true;
        },  
        async deletSort(item){
            item.loading = true;
            let {code,data} = await this.$Http.rowClockSortDel({ids:item.id+''});
            item.loading = false;
            if(code){
                this.$message.success('删除成功!')
                item.visible = false;
                this.getList();
            }
        },
        addRow(){
            this.callout = true;
            this.ruleForm.store_id = this.paging.store_id;
            this.ruleForm.shift_id = this.paging.shift_id;
            this.homegetStaff()
        },
        async homegetStaff(){
            let {code,data} = await this.$Http.homegetStaff({
                store_id:this.paging.store_id
            });
            if(code){
                data.forEach(v=>{
                    for(let val of this.tableData){
                        if(val.staff.id == v.id)
                            v.disabled = true;
                    }
                })
                this.staffList = data;
            }
        },
        onStart(env){
            console.log(env,'开始');
            this.wornList = this.tableData;
        },
        async onEnd(evt){
            console.log(evt,'结束');
            evt.preventDefault();
            let index = evt.newIndex;
            let {code,data} = await this.$Http.updateSort({
                id:evt.item.attributes.prisid.value,
                store_id:this.paging.store_id,
                passive_id:this.wornList[index].id
            })
            if(code){
                this.$message.success('修改排钟排序成功!')
            }
        },
        async datadragEnd(evt,ev){
            
        },
        async getShiftType(store_id){
            this.loading = true;
            let {code,data} = await this.$Http.getStoreShift({store_id})
            if(code){
                this.paging.shift_id = data.length?data[0].id:''
                this.shiftTypeList = data;
                this.getList();
            }
        },
        async staffshift(e){//班次列表
            console.log(e,'eeee');
            var date = new Date();
            let {code,data} = await this.$Http.staffshift({
                store_id:e,//
                date:`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`
            })
            if(code){
                this.paging.shift_id = data.length?data[0].id:''
                this.staffList = data;
            }
        },
        handleCurrentChange(val){
            this.form.page = val;
            this.getList();
        },
        stafftransfer(){
            this.$refs['ruleForm'].validate(async (valid) => {
                if (!valid) return;
                this.isBtn = true;
                let obj = Object.assign({},this.ruleForm);
                obj.sort = this.tableData.length+1;
                let {code,data} = await this.$Http.rowClockSortSave(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success('新增排序成功');
                    this.handleClose();
                    this.getList();
                }
            });
        },
        diaoc(type,row){
            console.log('!!!',this.ruleForm);
            this.ruleForm = Object.assign(this.ruleForm,{
                type,
                stay:row.store.title,
                staff_id:row.id,
            })
            console.log('Q',this.ruleForm);
            this.callout = true;
        },
        handleClose(dom){
            this.callout = false;
            dom&&dom();
            this.ruleForm = this.$options.data().ruleForm;
            this.$refs['ruleForm'].resetFields();
        },
        async homegetStore(){
            let { code,data } = await this.$Http.homegetStore();
            if(code){
                this.paging.store_id = data.length?data[0].id:''
                this.shopList = data;
                // this.staffshift(data[0].id)
                await this.getShiftType(data[0].id);
            }
        },
        //门店远程搜索
        async remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                    let {code,data} = await this.$Http.storegetGoods()
                    this.loading = false;
                    this.options = this.list.filter(item => {
                    return item.label.toLowerCase()
                        .indexOf(query.toLowerCase()) > -1;
                    });
                } else {
                this.options = [];
            }
        },
        async getList(){
            this.loading = true;
            let {code,data} = await this.$Http.rowClockSort(this.paging);
            this.loading = false;
            if(code){
                data.forEach(v=>{
                    v.visible = false;
                    v.loading = false;
                })
                data.unshift({id:'Q',staff:{id:''}})
                data.push({id:'W',staff:{id:''}})
                this.tableData = data;
            }
        },
        pickerDate(){

        },
        change(){

        }
    },
};
</script>

<style lang="scss" scoped>

.vs-table-box{
    table{
        font-size: 16px;
        border: solid #ebeef5;
        border-width: 1px 0 0  1px;
        border-collapse: separate;
	    border-spacing: 0;//控制间距
        td{
            border: solid #ebeef5;
            border-width: 0px 1px 1px  0;
            padding: 12px 20px;
            color: #606266;
        }
        thead{
            td{
                user-select: none;
                color: #909399;
                font-weight: 600;
                background: rgb(245, 246, 248);
            }
        }
        tbody{
            tr{
                &:hover{
                    background-color: #f5f7fa;
                }
            }
            td{
                
            }
        }
    }
    .table{
        font-size: 16px;
        border: solid #ebeef5;
        border-width: 0 0 0 1px ;
        display: flex;
        // flex-wrap: wrap;
        box-sizing: border-box;
        .addpai{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            box-sizing: border-box;
            padding: 0 20px !important;
        }
        >div{
            display: flex;
            flex-wrap: wrap;
        }
        // .thead .td{
        //     border-left-width: 1px !important;
        // }
        .tr{
            display: flex;
            flex-direction: column;
            flex-wrap: initial;
            // border: solid #ebeef5;
            // border-left-width: 1px !important;
            margin-bottom: 20px;
            .tbody:hover{
                background-color: #f5f7fa;
            }
            .td{
                border: solid #ebeef5;
                border-width: 0px 1px 1px  0;
                padding: 12px 20px;
                color: #606266;
                min-height: 43px;
            }
            .ttop{
                min-height: 46px;
                border-top-width: 1px;
                user-select: none;
                color: #909399;
                font-weight: 600;
                background: rgb(245, 246, 248);
            }
        }
    }
}
.image-thumbnail{
    width: 130px;
    height: 130px;
}
.vs-search-box{
    display: flex;
    padding-right: 22px;
    justify-content: space-between;
    .right{
        width: 180px;
        // display: flex;
    }
}
.red{
    color: #f00 !important;
}
</style>